<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/share-record.css">
    <link rel="stylesheet" href="../../css/pulice.css">
    <script src="../../js/api.js"></script>
    <script src="../../js/libs/zepto.min.js"></script>
    <script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/vue-resource.min.js"></script>
    <script src="../../js/aui-toast.js"></script>
    <script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
    	setToken();
        $(function () {
        	
        	var app = new Vue({
                el: '#box',
                data: {
                    HuaBao : {},//分享记录
                },
                mounted:function(){
                	this.$nextTick(function(){
                		this.myHuaBao();
                	})
                },
                methods:{
                	myHuaBao : function(){
                		this.$http.get(SURL+"app/share/shareList").then(function(res){
	                   			console.log(res.body.data)
	                   			this.HuaBao = res.body.data;
	                		}).catch(function(req){
                			
                		});
                	},
                	
                }
            });
        	
        	
            $('.hm-bar').load('../../data/headerOther.html', function (data) {
                $(this).find('.head-main').text('分享记录');
                $(this).find('.hm-bar-box').css('position', 'static');
                $(this).find('.head-left').on('tap', function () {
                    window.history.back();
                })
            });
			
            var $eventOrigin = $('.WD-ojbk > div');
            $eventOrigin.attr('data-toggle','hide');
            $eventOrigin.on('tap',function () {
                var type = $(this).attr('data-toggle');
                if (type == 'show') {
                    $(this).find('.time').animate({height: '0'},'fast',function () {
                        $(this).parent().attr('data-toggle','hide')
                    });
                    $(this).find('.blue > p').text('详情');
                    $(this).find('.blue > img').animate({transform: 'rotate(0)'},'fast');
                }else if (type == 'hide') {
                    // 样式重置
                    $eventOrigin.find('.time').animate({height: '0'},'fast',function () {
                        $(this).parent().attr('data-toggle', 'hide');
                    });
                    $eventOrigin.find('.blue > p').text('详情');
                    $eventOrigin.find('.blue > img').animate({transform: 'rotate(0deg)'},'fast');

                    $(this).find('.time').animate({height: '2rem'},'fast',function () {
                        $(this).parent().attr('data-toggle','show');
                    });
                    $(this).find('.blue > p').text('收起');
                    $(this).find('.blue > img').animate({transform: 'rotate(90deg)'},'fast');
                }
            })
        })
    </script>
    <title>分享记录</title>
</head>
<body>
<div id="box">
    <div class="hm-bar"></div>
    <!--身体-->
    <div class="WD-shenti">
        <div class="WD-nav">
            <div class="lmLogo">
                <p>累计推荐人数:<span>{{HuaBao.all}}</span> <span>(<span class="blue">{{HuaBao.charge}}</span>个主管,<span class="blue">{{HuaBao.manager}}</span>个经理)</span>
                </p>
            </div>

            <div class="lmLogo">
                <p>累计积分奖励:<span class="blue">{{HuaBao.score}}</span></p>
            </div>

            <div class="lmLogo">
                <p>累计现金奖励:<span class="blue">{{HuaBao.cash}}</span></p>
            </div>
        </div>
        <div class="WD-nav">
            <div class="lmLogo">
                <p>推荐人</p>
            </div>
        </div>
        <div class="WD-ojbk">
            <div v-for="(v,i) in HuaBao.invite">
                <div class="tjr flex">
                    <p>{{v.loginName}}</p>
                    <p class="blue">{{v.userPhone}}</p>
                    <div class="blue xq flex al">
                        <p>详情</p>
                        <img src="../../img/goIcon.png" alt=""/>
                    </div>
                </div>
                <div class="time flex">
                    <div class="sj">
                        {{v.createTime}}
                    </div>
                    <div class="zw" v-if="v.userType == 0">
                       	普通用户
                    </div>
                    <div class="zw" v-if="v.userType == 1">
                       	主管
                    </div>
                    <div class="zw" v-if="v.userType == 2">
                       	经理
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
